import React, { useState, useEffect, forwardRef } from "react";
import { Tree } from "antd";
import styles from "./index.less";

const dataList: { key: any; title: any; label: string }[] = [];
const generateList = (data: any) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const { key } = node;
    dataList.push({ key, title: data[i].title, label: data[i].title });
    if (node.children) {
      generateList(node.children);
    }
  }
};

const getParentKey = (key: any, tree: any[]): any => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some((item: any) => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
let childrenKeys: number[] = [];
const getChildrenKeys = (list: any[]) => {
  list.map(item => {
    childrenKeys.push(item.key)
    if (item.children.length) {
      getChildrenKeys(item.children);
    }
  })
}

interface Props {
  tabActive: string;
  className: string;
  searchValue: string;
  data: any[];
  multiple: boolean;
  onSelect: (data: any) => void;
}

const OrgTreeCom: React.FC<Props> = forwardRef((props, ref) => {
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([150, 1693]);
  // const [checkedKeys, setCheckedKeys] = useState<any[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
  const onExpand = (expandedKeysValue: React.Key[]) => {
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };
  // useImperativeHandle(ref, () => ({
  //   onOk: () => {
  //       return selectedKeys;
  //   }
  // }))


  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    childrenKeys = [];
    getChildrenKeys(info.selectedNodes);
    setSelectedKeys(selectedKeysValue);
    props.onSelect(childrenKeys);
  };
  useEffect(() => {
    const expandedKeys = dataList
      .map(item => {
        if (item.title.includes(props.searchValue)) {
          return getParentKey(item.key, props.data);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(true);
  }, [props.searchValue])

  const loop = (data: any[]): any =>
    data.map(item => {
      const index = item.title.indexOf(props.searchValue);
      const beforeStr = item.title.substr(0, index);
      const afterStr = item.title.substr(index + props.searchValue.length);
      const title =
        index > -1 ? (
          <span>
            {beforeStr}
            <span className={styles.treeSearchValue}>{props.searchValue}</span>
            {afterStr}
          </span>
        ) : (
          <span>{item.title}</span>
        );
      if (item.children) {
        return { title, key: item.key, label: item.title, children: loop(item.children) };
      }
      return {
        title,
        key: item.key,
      };
    });
  useEffect(() => {
    generateList(props.data);
  }, [])
  useEffect(() => {
    setSelectedKeys([]);
    // setCheckedKeys([]);
  }, [props.multiple])
  useEffect(()=>{
    if(props.tabActive === 'org'){
      setExpandedKeys([]);
      setSelectedKeys([]);
    }
  }, [props.tabActive])
  return (
    <Tree
      className={props.className}
      height={380}
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      treeData={loop(props.data)}
    />

  )
})
export default OrgTreeCom;
